// 获取节点
// 导航选项卡
let navBgLis = document.querySelectorAll('.navBg>li');

// 导航选项卡二级菜单栏
let navBgTexts = document.querySelectorAll('.navBg-text');
let navBgContentss = document.querySelectorAll('.navBg-contents');

// 今日推荐内容盒子
let recommendBoxs = document.querySelector('.recommend-boxs');

// 电子书选项卡
let ebookControlNavs = document.querySelectorAll('.ebook-Control-nav');
let ebookControlNavBoxss = document.querySelectorAll('.ebook-Control-nav-boxs');

console.log(navBgLis)


// 循环监听事件
for (let i = 0; i < navBgLis.length; i++) {
    // 移入添加效果
    navBgLis[i].addEventListener('mouseover', function () {
        navBgTexts[i].className = 'navBg-text active';
        navBgContentss[i].className = 'navBg-contents show';
    })
    // 移出移除效果
    navBgLis[i].addEventListener('mouseleave', function () {
        navBgTexts[i].className = 'navBg-text';
        navBgContentss[i].className = 'navBg-contents';
    })
}


var mySwiper = new Swiper('.swiper', {
    // direction: 'vertical', // 垂直切换选项
    loop: true, // 循环模式选项
    autoplay: {
        delay: 1000,//1秒切换一次
        disableOnInteraction: false,    // 鼠标移出 开始自动播放
        pauseOnMouseEnter: true,  //鼠标移入停止自动播放
    },
    // 加入 数字按钮
    pagination: {
        el: '.swiper-pagination',
        clickable: true,
        renderBullet: function (index, className) {
            return '<span class="' + className + '">' + (index + 1) + '</span>';
        },
    },
    // 如果需要前进后退按钮
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
})

// 定义一个含有对象的数组
let recommendList = [
    { img: '/images/product01.jpg', price: 399 },
    { img: '/images/product01.jpg', price: 499 },
    { img: '/images/product01.jpg', price: 599 },
    { img: '/images/product01.jpg', price: 699 },
    { img: '/images/product01.jpg', price: 799 },
    { img: '/images/product01.jpg', price: 899 },
    { img: '/images/index06_11.jpg', price: 268 },
    { img: '/images/index06_11.jpg', price: 368 },
    { img: '/images/index06_11.jpg', price: 468 },
    { img: '/images/index06_11.jpg', price: 568 },
    { img: '/images/index06_11.jpg', price: 668 },
    { img: '/images/index06_11.jpg', price: 768 },
]
// 定义一个全局变量的空字符串
let html = '';
// 向这个空字符串中 循环添加拼接的 子节点
for (let i = 0; i < recommendList.length; i++) {
    html += `
    <a href="/info.html">
    <div class="recommend-box fl">
        <div class="recommend-img">
            <img src="${recommendList[i].img}" alt="">
        </div>
        <div class="recommend-tag"></div>
        <div class="recommend-text1">黑爵青蜂侠六键电竞游戏鼠标</div>
        <div class="recommend-text2">全国联保 一年免费包换</div>
        <div class="recommend-price">￥:${recommendList[i].price}</div>
    </div> 
    </a>
    
    `
}
// 渲染到页面中的 父节点
recommendBoxs.innerHTML = html;

// 电子书选项卡  添加双重循环
for (let i = 0; i < ebookControlNavs.length; i++) {
    //点击标题  隐藏所有ebookControlNavs 显示 对应的 内容ebookControlNavs
    //将所有的 ebookControlNavBoxs 全部隐藏 显示 对应的 ebookControlNavBoxs
    ebookControlNavs[i].addEventListener('click', function () {
        for (let j = 0; j < ebookControlNavBoxss.length; j++) {
            ebookControlNavs[j].className = 'ebook-Control-nav fr'
            ebookControlNavBoxss[j].className = 'ebook-Control-nav-boxs clearfix'
        }
        ebookControlNavs[i].className = 'ebook-Control-nav fr ebook-active'
        ebookControlNavBoxss[i].className = 'ebook-Control-nav-boxs show clearfix'
    })
}

// 轮播图 封装函数
function creatSwiper(SwiperClassName) {
    var mySwiper = new Swiper(SwiperClassName, {
        // direction: 'vertical', // 垂直切换选项
        loop: true, // 循环模式选项
        autoplay: {
            delay: 1000,//1秒切换一次
            disableOnInteraction: false,    // 鼠标移出 开始自动播放
            pauseOnMouseEnter: true,  //鼠标移入停止自动播放
        },
        // 加入 数字按钮
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
            renderBullet: function (index, className) {
                return '<span class="' + className + '">' + (index + 1) + '</span>';
            },
        },
        // 如果需要前进后退按钮
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    })
}
creatSwiper('.swiper1');
creatSwiper('.swiper2');
creatSwiper('.swiper3');
creatSwiper('.swiper4');
creatSwiper('.swiper5');
creatSwiper('.swiper6');
creatSwiper('.swiper7');
creatSwiper('.swiper8');
creatSwiper('.swiper9');
creatSwiper('.swiper10');
creatSwiper('.swiper11');
creatSwiper('.swiper12');


/* 手风琴效果 */
// 移动到 另外一个盒子时 隐藏所有的带图片的大盒子---显示所有的小盒子（标题盒子）
// 再将当前对应的 带图片的大盒子显示 当前小盒子（标题盒子）隐藏

// 获取手风琴 li 节点
let accordionContentBoxLis = document.querySelectorAll('.accordion-content-box li');
// 获取标题 节点
let accordionContents = document.querySelectorAll('.accordion-content');
// 获取内容节点
let accordionContentss = document.querySelectorAll('.accordion-contents');

console.log(accordionContentBoxLis);

// 鼠标移入 某一个li
// 1 将全部内容 隐藏   2 将对应的内容 显示
// 3 将全部标题 显示   4 将对应的标题 隐藏

// 遍历监听li
for (let i = 0; i < accordionContentBoxLis.length; i++) {
    accordionContentBoxLis[i].addEventListener('mouseover', function () {
        for (let j = 0; j < accordionContents.length; j++) {
            accordionContentss[j].className = 'accordion-contents clearfix disnone';//1
            accordionContents[j].className = ' clearfix clearfix show';//3
        }
        accordionContentss[i].className = 'accordion-contents clearfix show';//2
        accordionContents[i].className = ' clearfix clearfix disnone';//4

    })
}

// 楼层跳转    获取图片 节点
let skipImgs = document.querySelectorAll('.skip-img');
console.log(skipImgs);

for (let i = 0; i < skipImgs.length; i++) {
    let y = -40 * i;
    console.log(y);
    skipImgs[i].style.background = `url('/images/floor.png') 0 ${y}px #f2f2f2`;
}

// 获取楼层跳转 li 节点
let skipLis = document.querySelectorAll('.skip li');
// 获取文字内容节点
let skipTexts = document.querySelectorAll('.skip-text')
// 获取顶部搜索按钮
let searchTop = document.querySelector('.search-top');


console.log(searchTop);

// for(let i=0;i<skipLis.length;i++){
//     skipLis[i].addEventListener('mouseover',function(){
//         for(let j=0;j<skipImgs.length;j++){
//             skipImgs[j].className = 'skip-img';
//             skipTexts[j].className = 'skip-text disnone';
//         }
//     })
//     skipImgs[i].className = 'skip-img skipColor';
//     skipTexts[i].className = 'skip-text show';
// }

for (let i = 0; i < skipLis.length; i++) {
    let x = 40;
    let y = -40 * i;
    skipLis[i].addEventListener('mouseover', function () {
        skipImgs[i].style.background = `url('/images/floor.png') ${x}px ${y}px #93d46f`;
        skipTexts[i].style.width = '40px';
    })
    skipLis[i].addEventListener('mouseleave', function () {
        skipImgs[i].style.background = `url('/images/floor.png') 0 ${y}px #f2f2f2`;
        skipTexts[i].style.width = '0';
    })
}
// 获取滚动条 需要操作的 节点
let skip = document.querySelector('.skip');

    // 回到顶部
let roof = document.querySelector('.roof');
window.onscroll = function () {
    let t = document.documentElement.scrollTop || document.body.scrollTop
    console.log(t)
    if (t >= 1000) {
        skip.className = 'skip show';
    } else {
        skip.className = 'skip disnone';
    }

    if (t >= 500) {
        searchTop.style.height = '50px';
        searchTop.style.borderBottom = '2px solid #f60';
    } else {
        searchTop.style.height = '';
        searchTop.style.borderBottom = '';
    }

    // 回到顶部
    if(t>=4300){
        roof.className = 'roof show'
    }else{
        roof.className = 'roof disnone'
    }

}

// 点击按钮---事件监听 click 
// 更改滚动条距离顶部的位置 为 0
console.log(roof)
roof.addEventListener('click',function(){
    //点击后 每间隔 10ms 反复执行代码 
    // 获取当前滚动条 距顶部的位置  t
    // 然后 每10毫秒  t -200;  赋值给滚动条  修改滚动条的距顶部位置
    // 等于零后  清除定时器
    let timer = setInterval(function(){
        let t = document.documentElement.scrollTop || document.body.scrollTop;
        t-=200;
        document.documentElement.scrollTop = t;
        document.body.scrollTop = t;
        // 如果t等于零 清除定时器
        if(t<=0){
            clearInterval(timer);
        }
    },10)
})


// 获取input框节点
let inpone = document.querySelector('#inpone');
let inptwo = document.querySelector('#inptwo');

inpone.addEventListener('input', function () {
    inptwo.value = inpone.value
})
inptwo.addEventListener('input', function () {
    inpone.value = inptwo.value
})


// 获取服装 需要遍历的 节点
let clothingControlNav = document.querySelectorAll('.clothing-control-nav');
let clothingControlBigBox = document.querySelectorAll('.clothing-control-bigBox');
// 服装选项卡  添加双重循环
for (let i = 0; i < clothingControlNav.length; i++) {
    //点击标题  隐藏所有clothingControlNav            显示 对应的 内容clothingControlNav
    //将所有的 clothingControlBigBox 全部隐藏         显示 对应的 clothingControlBigBox
    clothingControlNav[i].addEventListener('click', function () {
        for (let j = 0; j < clothingControlBigBox.length; j++) {
            clothingControlNav[j].className = 'clothing-control-nav fr'
            clothingControlBigBox[j].className = 'clothing-control-bigBox'
        }
        clothingControlNav[i].className = 'clothing-control-nav fr clothing-active'
        clothingControlBigBox[i].className = 'clothing-control-bigBox show'
    })
}

// 获取父节点
let clothingLogo = document.querySelector('.clothing-logo');
// 定义一个含有对象的数组
let clothingLogoimg = [
    { img: '/images/index15_13.jpg', num: 1 },
    { img: '/images/index15_14.jpg', num: 2 },
    { img: '/images/logo13_11.jpg', num: 3 },
    { img: '/images/logo13_12.jpg', num: 4 },
    { img: '/images/logo13_13.jpg', num: 5 },
    { img: '/images/logo13_14.jpg', num: 6 },
    { img: '/images/logo13_15.jpg', num: 7 },
    { img: '/images/logo13_16.jpg', num: 8 },
    { img: '/images/logo13_17.jpg', num: 9 },

]
// 定义一个全局变量的空字符串
let clothingLogosave = '';
// 向这个空字符串中 循环添加拼接的 子节点
for (let i = 0; i < clothingLogoimg.length; i++) {
    clothingLogosave += `
        <div class="clothing-logo-img${clothingLogoimg[i].num} fl">
            <img src="${clothingLogoimg[i].img}" alt="">
        </div>
    `
}
// 渲染到页面中的 父节点
clothingLogo.innerHTML = clothingLogosave;

// 获取户外运动 需要遍历的 节点
let exerciseControlNav = document.querySelectorAll('.exercise-control-nav');
let exerciseControlBigBox = document.querySelectorAll('.exercise-control-bigBox');
// 户外运动选项卡  添加双重循环
for (let i = 0; i < exerciseControlNav.length; i++) {
    //点击标题  隐藏所有exerciseControlNav            显示 对应的 内容exerciseControlNav
    //将所有的 exerciseControlBigBox 全部隐藏         显示 对应的 exerciseControlBigBox
    exerciseControlNav[i].addEventListener('click', function () {
        for (let j = 0; j < exerciseControlBigBox.length; j++) {
            exerciseControlNav[j].className = 'exercise-control-nav fr'
            exerciseControlBigBox[j].className = 'exercise-control-bigBox'
        }
        exerciseControlNav[i].className = 'exercise-control-nav fr exercise-active'
        exerciseControlBigBox[i].className = 'exercise-control-bigBox show'
    })
}

// 获取父节点
let exerciseLogo = document.querySelector('.exercise-logo');
console.log(exerciseLogo)
// 定义一个含有对象的数组
let exerciseLogoimg = [
    { img: '/images/index15_13.jpg', num: 1 },
    { img: '/images/index15_14.jpg', num: 2 },
    { img: '/images/logo13_11.jpg', num: 3 },
    { img: '/images/logo13_12.jpg', num: 4 },
    { img: '/images/logo13_13.jpg', num: 5 },
    { img: '/images/logo13_14.jpg', num: 6 },
    { img: '/images/logo13_15.jpg', num: 7 },
    { img: '/images/logo13_16.jpg', num: 8 },
    { img: '/images/logo13_17.jpg', num: 9 },

]
// 定义一个全局变量的空字符串
let exerciseLogosave = '';
// 向这个空字符串中 循环添加拼接的 子节点
for (let i = 0; i < exerciseLogoimg.length; i++) {
    exerciseLogosave += `
        <div class="clothing-logo-img${exerciseLogoimg[i].num} fl">
            <img src="${exerciseLogoimg[i].img}" alt="">
        </div>
    `
}
// 渲染到页面中的 父节点
exerciseLogo.innerHTML = exerciseLogosave;

// 获取父节点
let childrenLogo = document.querySelector('.children-logo');
console.log(childrenLogo)
// 定义一个含有对象的数组
let childrenLogoimg = [
    { img: '/images/index15_13.jpg', num: 1 },
    { img: '/images/index15_14.jpg', num: 2 },
    { img: '/images/logo13_11.jpg', num: 3 },
    { img: '/images/logo13_12.jpg', num: 4 },
    { img: '/images/logo13_13.jpg', num: 5 },
    { img: '/images/logo13_14.jpg', num: 6 },
    { img: '/images/logo13_15.jpg', num: 7 },
    { img: '/images/logo13_16.jpg', num: 8 },
    { img: '/images/logo13_17.jpg', num: 9 },

]
// 定义一个全局变量的空字符串
let childrenLogosave = '';
// 向这个空字符串中 循环添加拼接的 子节点
for (let i = 0; i < childrenLogoimg.length; i++) {
    childrenLogosave += `
        <div class="children-logo-img${childrenLogoimg[i].num} fl">
            <img src="${childrenLogoimg[i].img}" alt="">
        </div>
    `
}
// 渲染到页面中的 父节点
childrenLogo.innerHTML = childrenLogosave;



let promotionControlNavConceal = document.querySelectorAll('.promotion-control-nav-conceal');
q=parseInt(promotionControlNavConceal);
// console.log(q)

// 定义一个含有对象的数组
let promotionList = [
    { img1: '/images/index25_12.jpg',img2:'/images/index27_14.jpg', price: 109 },
    { img1: '/images/index25_12.jpg',img2:'/images/index27_14.jpg', price: 119 },
    { img1: '/images/index25_12.jpg',img2:'/images/index27_14.jpg', price: 129 },
    { img1: '/images/index25_12.jpg',img2:'/images/index27_14.jpg', price: 139 },
    { img1: '/images/index25_12.jpg',img2:'/images/index27_14.jpg', price: 149 },
    { img1: '/images/index25_12.jpg',img2:'/images/index27_14.jpg', price: 159 },
    { img1: '/images/index25_12.jpg',img2:'/images/index27_14.jpg', price: 169 },
    { img1: '/images/index25_12.jpg',img2:'/images/index27_14.jpg', price: 179 },
    { img1: '/images/index25_12.jpg',img2:'/images/index27_14.jpg', price: 189 },
    { img1: '/images/index25_12.jpg',img2:'/images/index27_14.jpg', price: 199 },
]
// 定义一个全局变量的空字符串
let promotion = '';
// 向这个空字符串中 循环添加拼接的 子节点
for (let i = 0; i < promotionList.length; i++) {
    promotion += `
    <div class="promotion-control-nav-conceal-content fl">
    <div class="promotion-control-nav-conceal-content-img">
        <img src="${promotionList[i].img1}" alt="">
    </div>
    <div class="promotion-control-nav-content">
            Pigeon法国制奶嘴&ensp;
            无毒天然乳胶
    </div>
    <div class="promotion-control-nav-price">
        ￥：${promotionList[i].price}
    </div>
    <div class="promotion-control-nav-evaluate">
        <div class="promotion-control-nav-elf">
            <img src="${promotionList[i].img2}" alt="">
        </div>
        已有 <span>988</span>条评价
    </div>
    </div>
    `
}
// 渲染到页面中的 父节点
promotionControlNavConceal[0].innerHTML = promotion;
promotionControlNavConceal[1].innerHTML = promotion;


// 获取推广商品 需要遍历的 节点
// 圆点   promotion-control-nav              promotion-active 
// 选项卡  promotion-control-nav-conceal     clearfix
// promotionControlNavConceal
let promotionControlNav = document.querySelectorAll('.promotion-control-nav');

// 推广商品选项卡  添加双重循环
for (let i = 0; i < promotionControlNav.length; i++) {
    //点击标题  隐藏所有promotionControlNav
    // 显示 对应的 内容promotionControlNav

    //将所有的 promotionControlNavConceal 全部隐藏         显示 对应的 promotionControlNavConceal
    promotionControlNav[i].addEventListener('click', function () {
        for (let j = 0; j < promotionControlNavConceal.length; j++) {
            promotionControlNavConceal[j].className = 'promotion-control-nav-conceal disnone clearfix';
            promotionControlNav[j].className = 'promotion-control-nav';
        }
        promotionControlNav[i].className = 'promotion-control-nav promotion-active';
        promotionControlNavConceal[i].className = 'promotion-control-nav-conceal show clearfix';
    })
}

let promotionContent = document.querySelectorAll('.promotion-control-nav-conceal-content');
console.log(promotionContent);

    for(let i=0;i<promotionContent.length;i++){
        promotionContent[i].addEventListener('mouseover',function(){
            promotionContent[i].className = 'promotion-control-nav-conceal-content fl promotion-active-smallBox'
        })
        promotionContent[i].addEventListener('mouseleave',function(){
            promotionContent[i].className = 'promotion-control-nav-conceal-content fl'
        })
    }



































